<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>协和医院网上服务平台</title>
    <link rel="stylesheet" href="css/st.css">
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/layout.css"/>
    <link rel="stylesheet" type="text/css" href="css/ui.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	  <script type="text/javascript" src="js/ui.js"></script>
    <script src="js/playlist.js"></script>
    <script src="js/vue.js"></script>
  </head>
  <body>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
             
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					住院申请
				</h4>
			</div>
			<div class="modal-body">
                <table>
                    <tr>
                        <td><p>姓名：<input type="text" id="name"/></p></td>
                        <td><p>身份证号：<input type="text" id="identity" /></p></td>
                   </tr>
                     <tr>
                         <td><p style="margin-top: 10px ; margin-left: 50%;float:left">性别：</p>
                          
                               <select name="性别" margin-top="10px" id="sex">
                               <option>请选择</option>
                               <option value="男">男</option>
                               <option value="女">女</option></select>
                       </td>
                         <td> <p style="margin-top: 10px ; margin-left: 50%;float:left">民族：</p>
                           
                               <select name="民族" margin-top="10px" id="minzu">
                               <option>请选择</option>
                               <option value="汉族">汉族</option>
                               <option value="少数民族">少数民族</option></select>
                       </td>
                   </tr>
                   <tr> 
                      <td><p style="margin-top: 10px ; margin-left: 50%;float:left">科室：</p>
                       
                       <div id="app1"><select name="科室" margin-top="10px" id="dept">
                       <option v-for="site in sites">{{site}}</option></div>
                      </select>
                     </td>
                       <script>
                           new Vue({
                               el:'#app1',
                               data:{
                                   sites:['请选择','内科','外科','妇产科','儿科']
                               }
                           })
                       </script>
                      <td>
                   <p>生日：<input type="text" id="j_Date1" class="input"></p>
                   <script>var myDate1 = new Calender({id:'j_Date1'});</script>
                    </td>
                    </tr>
                     <tr>
                         <td><p style="margin-top: 10px ; margin-left: 45%;float:left">床位号:</p>
                          
                           <select name="床位号" margin-top="10px" id="bedcode">
                           <option>请选择</option>
                           <option value="1号床">1号床</option>
                           <option value="2号床">2号床</option>
                           <option value="3号床" >3号床</option>
                          
                           </select>
                        
                       </td>
                         <td><p>手机号：<input type="text" id="tel"/></p></td>
                     </tr>
                     <tr>
                      <td><p>紧急联系人：<input type="text" id="jinji"/></p></td>
                      <td> <p>主治医师：<input type="text" id="doctor"/></p></td>
                   </tr>
                   <tr>
                       <td><p>病房号：<input type="text" id="room"/></p></td>
                       <td><p style="margin-top: 10px ; margin-left: 40%;float:left">入院状况:</p>
                       
                               <select name="入院状况" margin-top="10px" id="state" type="text">
                               <option>请选择</option>
                               <option value="已住院">已住院</option>
                               <option value="未住院">未住院</option>  
                       </td> 
                   </tr>
                </table>
			</div>
         
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">提交
				</button>
				<button type="button" class="btn btn-primary">
					编辑
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>






    <!-- 顶部 -->
    <div class="top" id="top">
      <div class="wrap">
        <p class="call">010-114/116114电话预约</p>
        <p class="welcome">欢迎来到协和医院网上服务平台&nbsp;请&nbsp;
          <a href="#">登录</a>
          <a href="#">注册</a>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a href="#">帮助中心</a>
        </p>
      </div>
    </div>
    <!-- header区域 -->
    <div class="header" id="header">
      <div class="wrap">
        <a class="logo" href="main.html"> <img src="img/智慧医疗 (1).png"  alt=""> </a>
       
        
          <div class="search ui-search">
            <!-- 搜索栏 -->
            <div class="ui-search-selected">医院</div>
            <div class="ui-search-select-list">
                <a href="#1">科室</a>
                <a href="#1">疾病</a>
                <a href="#1">医院</a>
            </div>
            <input type="text" name="search-content" class="ui-search-input" placeholder="请输入搜索内容">
            <a href="#" class="ui-search-submit " style="color:#efe8e8 ;">搜索</a>
          </div>
         
        </div>
      </div>
   
    <!-- 导航栏 -->
    <div class="nav" id="nav">
      <div class="wrap">
        <div class="menu" ><a href="#" class="link">首页</a></div>
        <a href="#" class="link">医院介绍</a>
        <a href="#" class="link-hos" id="link-hos">按医院挂号</a>
        <a href="#" class="link">就医指南</a>
        <a href="#" class="link">健康科普</a>
        <a href="#" class="link">最新公告</a>
        <a href="#" class="link right">社会知名医院</a>
      </div>
    </div>
    <!--三级联动-->
    <script>
      $(document).ready(function(){
          $("#link-hos").ready(function(){
          $("#sanji").hide();
        });
          $("#link-hos").click(function(){
          $("#sanji").show();
        });
        $("#link-hos").dblclick(function(){
          $("#sanji").hide();
        });
        
      });
      </script>
     <div id="sanji">
      <p>地理:</p> <form>
      <select id="province"><option value="-1">请选择</option></select>
      <select id="city"></select>
     <select id="country"></select>
      </form>
      <p>科室：</p><form id="keshi">
          <select id="dept1"><option value="-1">请选择</option></select>
          <select id="part"></select>
          <select id="hos"></select>
          </form>
          <p>综合:</p><form id="fuwu">
              <select id="pro"><option value="-1">请选择</option></select>
               <select id="cit"></select>
            </form>
  </div>
     
      <script>
          var cityArr=new Array();
          var countryArr=new Array();
          var provinceArr=['河南','山东','辽宁'];
          //市数据
          cityArr['河南']=['郑州','洛阳'];
          cityArr['山东']=['青岛','聊城'];
          cityArr['辽宁']=['鞍山','丹东'];
          //区数据
          countryArr['郑州']=['二七区','金水区'];
          countryArr['洛阳']=['管城回族区','洛龙区'];
          countryArr['青岛']=['李沧区','市南区'];
          countryArr['聊城']=['东昌府区','高新区'];
          countryArr['鞍山']=['铁东区','铁西区'];
          countryArr['丹东']=['振兴区','元宝区'];
          var province=document.getElementById('province');
          var city=document.getElementById('city');
          var country=document.getElementById('country');
          //Option('文本','值')
          for(var i in provinceArr){
              province.add(new Option(provinceArr[i],provinceArr[i]));
          }
          function createOption(obj,data){
              for(var i in data){
                  var op=new Option(data[i],data[i]);
                  obj.add(op);
              }
          }
          //添加市
          province.onchange=function(){
              city.length=0;
              createOption(city,cityArr[province.value]);
              city.onchange();
          }
          //添加区
          city.onchange=function(){
              country.length=0;
              createOption(country,countryArr[city.value]);
          }
  </script>
  
  
  
  
  <script>
      var partArr=new Array();
      var hosArr=new Array();
      //省份数据
      var deptArr=['麻醉医学科','感染病科','眼科'];
      //市数据
      partArr['麻醉医学科']=['麻醉科','疼痛科'];
      partArr['感染病科']=['肝病科','结核病科'];
      partArr['眼科']=['眼底科','眼外伤科'];
      //区数据
      hosArr['麻醉科']=['华西医院','协和医院'];
      hosArr['疼痛科']=['仁济医院','协和医院'];
      hosArr['肝病科']=['舟山分院','地坛医院'];
      hosArr['结核病科']=['肺科医院','人民医院'];
      hosArr['眼底科']=['眼科中心','同仁医院'];
      hosArr['眼外伤科']=['人民医院','第二医院'];
      var dept=document.getElementById('dept1');
      var part=document.getElementById('part');
      var hos=document.getElementById('hos');
      //Option('文本','值')
      for(var i in deptArr){
         dept.add(new Option(deptArr[i],deptArr[i]));
      }
      function createOption(obj,data){
          for(var i in data){
              var op=new Option(data[i],data[i]);
              obj.add(op);
          }
      }
      //添加市
      dept.onchange=function(){
          part.length=0;
          createOption(part,partArr[dept.value]);
          part.onchange();
      }
      //添加区
      part.onchange=function(){
          hos.length=0;
          createOption(hos,hosArr[part.value]);
      }
  </script>
  
  
  
      <script>
          var citArr=new Array();
          //医院综合评价指标
          var proArr=['排序','线上服务','医院级别'];
          //具体内容
          citArr['排序']=['综合排序','排行'];
          citArr['线上服务']=['预约挂号','在线问诊'];
          citArr['医院级别']=['三甲','三级以上'];
         var pro=document.getElementById('pro');
          var cit=document.getElementById('cit');
          
          //Option('文本','值')
          for(var i in proArr){
              pro.add(new Option(proArr[i],proArr[i]));
          }
          function createOption(obj,data){
              for(var i in data){
                  var op=new Option(data[i],data[i]);
                  obj.add(op);
              }
          }
          
          pro.onchange=function(){
              cit.length=0;
              createOption(cit,citArr[pro.value]);
              cit.onchange();
          }
        
  </script>
    <!-- 医院简绍区域 -->
    <div class="banner" id="banner">
      <div class="wrap">
        <div class="title">
          <span class="title-left">协和医院 <a href="#">关注医院</a></span>
          <span class="title-right">
            <span class="title-right-tips">等级:</span>三级甲等 &nbsp;&nbsp;
            <span class="title-right-tips">区域:</span>东城区 &nbsp;&nbsp;
            <span class="title-right-tips">分类:</span>中国医科院医院 &nbsp;&nbsp;
          </span>
        </div>
        <div class="banner-content">
          <div class="box" id="box">
            <div class="left">
                <!--轮播图-->
                <ul>
                    <li><a href="#"><img src="img/1.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/2.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/3.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/4.jpg" alt=""></a></li>
                    <li><a href="#"><img src="img/5.jpg" alt=""></a></li>
         
                </ul>
         
                <ol class="bar">
         
                </ol>
        </div>
        </div>
          <div class="middle">
            <span class="icon-address" style="color:black ;">[东院]北京市东城区帅府园一号</span>
            <span class="icon-web"style="color:black;" >http://www.punch.com</span>
            <span class="icon-tel"style="color:black" >东院咨询台：010-69155564</span>
            <span class="icon-trans"  style="color:black ;">东院：106，108，110，116，684，685到东单路口北；
              41，104快，814到东单路口南；20，25，37，39到东单路口东</span>
          </div>
          <div class="right">
            <img src="img/xiehelocation.jpg" alt="">
          </div>
        </div>
      </div></div>
      
    <!-- 医院体系区域 -->
    <div class="content " id="content" >
      <div class="wrap">
        <!-- 导航栏 -->
        <div class="nav">
          <a href="#2" class="link selected">预约挂号</a>
          <a href="#2" class="link1" data-toggle="modal" data-target="#myModal">住院申请</a>
          <a href="#2" class="link">预约须知</a>
          <a href="#2" class="link">医生信息</a>
          <a href="#2" class="link">查询取消</a>
          <a href="#2" class="link">出院申请</a>
        </div>
        <div class="schedule hidden" >
          <span>科室排班表</span>
          <span class="back"><a href="#">返回科室列表</a></span>
        </div>
      </div>
    </div>



      <div class="content-lists clearfix">
        <div class="wrap clearfix">
          <div class="content-list focus">
            <div class="content-tab">
              <div class="caption">开放预约科室</div>
              <div class="content-table">
                <table>

                </table>
              </div>
            </div>
            <div class="content-news">
              <div class="caption">
                预约规则
                <span>更新时间每日8：30更新</span>
              </div>
              <div class="content-news-tips">
                <div class="line">
                  <div class="line-name">预约周期:</div><div>7天</div>
                </div>
                <div class="line">
                  <div class="line-name">放号时间:</div><div>8：30</div>
                </div>
                <div class="line">
                  <div class="line-name">停诊时间:</div>
                  <div>下午14：00停止次日预约挂号，周五14：00停挂至下周一</div>
                </div>
                <div class="line">
                  <div class="line-name">退号时间:</div>
                  <div>就诊前一工作日14：00前取消</div>
                </div>
                <div class="line">
                  <div class="line-name">特殊规则:</div>
                  <div>取号地点不同：西院区预约号区号地点：
                  西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东
                  院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</div>
                </div>
              </div>
            </div>
          </div>
          <div class="content-list">
            <!-- 医院介绍 -->
            <div class="hospital-intro">

            </div>
          </div>
          <div class="content-list">
            <!-- 预约须知 -->

          </div>

          <div class="content-list">
          <!-- 医生信息 -->
            <div class="stop-title">
            医生信息
            </div>
            <table class="stop-tips-table" id="stop-tips-table">
              <div id="inputs">
				
              </div>

            </table>
          </div>
          <script>
            var strs = [
                {
                    "id":"蒋子东",
                    "pwd":"副主任医师",
                    "w":"耳鼻喉科"
                },
                {
                    "id":"董振华",
                    "pwd":"主任医师",
                    "w": "中医科"
                },
                {
                    "id":"连伟",
                    "pwd":"副主任医师",
                    "w":"神经外科"
                },
                {
                    "id":"关凯",
                    "pwd":"主治医师",
                    "w":"反应科"
                },
                {
                    "id":"茅枫",
                    "pwd":"副主任医师",
                    "w": "乳腺外科"
                },
                {
                    "id":"赵岩",
                    "pwd":"主任医师", 
                    "w": "风湿免疫科"
                }
            ];
            //规定每页显示长度为3
            var len = 3;
            //确认该集合会被分成几页，分成几页就代表需要几个页面按钮
            function limits(){
                var countLim = Math.ceil(strs.length/len);//余数也算是一页，这里用向上取整
                //确认页面按钮个数，进行循环显示到页面上
                document.getElementById("inputs").innerHTML='';//清空一下
                for(var i=1;i<=countLim;i++){
                    document.getElementById("inputs").innerHTML+='<input type="button" value="'+i+'" onclick="limitinput(this)"/>';//每个页面按钮都绑定上一个点击事件
                }
            }
            var choose = 0;
            //点击按钮获取当前按钮的值进行选择当前table是第几页数据
            function limitinput(ids){
                choose = ids.value;
                tablestr(choose);//刷新table数据
                limits();//刷新页面按钮
                ids.style.backgroundColor='red';
                liminputcolor(choose);
            }
            //通过当前页面按钮和页面数据长度将数据放进table内
            function tablestr(num){//num是指当前哪个页面
                var num1 = (num-1)*len;//确定循环开始的集合下标
                var num2 = num*len;//确定循环结束的结束下标
                document.getElementById("stop-tips-table").innerHTML='';//清空一下
                for(var i=num1;i<num2;i++){//遍历数组
                    var str = '';
                    for(var h in strs[i]){//遍历集合
                        str+='<td>'+strs[i][h]+'</td>';
                    }
                    document.getElementById("stop-tips-table").innerHTML+='<tr>'+str+'</tr>';//每循环一次添加一条数据
                }
            }
            function liminputcolor(choose){
                document.getElementById("inputs").childNodes[choose-1].style.backgroundColor="red";
            }
            //初始化，当前页面显示为第一页
            limits();//页面按钮生成
            document.getElementById("inputs").childNodes[0].style.backgroundColor="red";//第一个按钮的背景颜色为红色
            tablestr(1);//table数据显示
           </script>




          <div class="content-list">
            <!-- 查询取消 -->
            <div class="search-cancel">
              <div class="line">
                <span>预约识别码:</span>
                <input type="text" name="" value="">
                <button type="button" name="" value="">查询订单</button>
              </div>
            </div>
          </div>
        </div>
        <div class="wrap clearfix hidden">
          <table>
            <tr>
              <td>
                <div class="leftBtn">
                  <div class="wrap_btn">
                    <div class="btn"></div>
                  </div>
                  <div class="status">上午</div>
                  <div class="status">下午</div>
                  <div class="status">晚上</div>
                </div>
              </td>
              <td>
                <div class="main">
                  <div class="schedule_box clearfix">
                    <!-- 模板
                    <div class="schedule_box_item">
                      <div class="date">星期一 <br>2019-01-01</div>
                      <div class="status"></div>
                      <div class="status status_full">约满</div>
                      <div class="status"></div>
                    </div>
                  -->
                  </div>
                </div>
              </td>
              <td>
                <div class="rightBtn">
                  <div class="wrap_btn">
                    <div class="btn"></div>
                  </div>
                  <div class="status"></div>
                  <div class="status"></div>
                  <div class="status"></div>
                </div>
              </td>
              <td>
                <div class="content-news">
                  <div class="title">
                    预约规则
                  </div>
                  <div class="line">
                    <div class="line-name">预约周期:</div><div>7天</div>
                  </div>
                  <div class="line">
                    <div class="line-name">放号时间:</div><div>8：30</div>
                  </div>
                  <div class="line">
                    <div class="line-name">停诊时间:</div>
                    <div>下午14：00停止次日预约挂号，周五14：00停挂至下周一</div>
                  </div>
                  <div class="line">
                    <div class="line-name">退号时间:</div>
                    <div>就诊前一工作日14：00前取消</div>
                  </div>
                  <div class="line">
                    <div class="line-name">特殊规则:</div>
                    <div>取号地点不同：西院区预约号区号地点：
                    西院区门诊楼一层大厅挂号窗口取号。东院区预约号取号地点：东
                    院区老门诊楼一层大厅挂号窗口或新门诊楼各楼层挂号/收费窗口取号。</div>
                  </div>
                </div>
              </td>
            </tr>
            <tr >
              <td colspan="4">
                <div class="bottom">
                  <span class="choice">您还没有选择就诊日期</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
        </div>
      </div>



    <!-- footer -->
    <div class="footer" id="footer">
      Copyright (c) 2018 Copyright Holder All Rights Reserved.
    </div>
  </body>
 

  
  <!--轮播图-->
  <script>

    //传入元素的id,返回标签对象，方便获取元素
    function myFunction(id) {
       return document.getElementById(id);
   }

   //获取各元素，方便操作
   var box=myFunction("box");
   var left=box.children[0];
   var ulObj=left.children[0];
   var list=ulObj.children;
   var olObj=left.children[1];
   var imgWidth=left.offsetWidth;
   
   var pic=0;
   //根据li个数，创建小按钮
   for(var i=0;i<list.length;i++){
       var liObj=document.createElement("li");

       olObj.appendChild(liObj);
       liObj.innerText=(i+1);
       liObj.setAttribute("index",i);

       //为按钮注册mouseover事件
       liObj.onmouseover=function () {
           //先清除所有按钮的样式

           for (var j=0;j<olObj.children.length;j++){
               olObj.children[j].removeAttribute("class");
           }
           this.className="current";
           pic=this.getAttribute("index");
           animate(ulObj,-pic*imgWidth);
       }

   }


   //设置ol中第一个li有背景颜色
   olObj.children[0].className = "current";
   //克隆一个ul中第一个li,加入到ul中的最后=====克隆
   ulObj.appendChild(ulObj.children[0].cloneNode(true));
//自动播放的时间
   var timeId=setInterval(onmouseclickHandle,1500);
   
   function onmouseclickHandle() {
      
       if (pic == list.length - 1) {
           //如何从第6个图,跳转到第一个图
           pic = 0;//先设置pic=0
           ulObj.style.left = 0 + "px";//把ul的位置还原成开始的默认位置
       }
       pic++;//立刻设置pic加1,那么此时用户就会看到第二个图片了
       animate(ulObj, -pic * imgWidth);//pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片
       //如果pic==5说明,此时显示第6个图(内容是第一张图片),第一个小按钮有颜色,
       if (pic == list.length - 1) {
           
           olObj.children[olObj.children.length - 1].className = "";
           //第一个按钮颜色设置上
           olObj.children[0].className = "current";
       } else {
           //干掉所有的小按钮的背景颜色
           for (var i = 0; i < olObj.children.length; i++) {
               olObj.children[i].removeAttribute("class");
           }
           olObj.children[pic].className = "current";
       }
   }
   

   //设置任意的一个元素,移动到指定的目标位置
   function animate(element, target) {
       clearInterval(element.timeId);
       //定时器的id值存储到对象的一个属性中
       element.timeId = setInterval(function () {
           //获取元素的当前的位置,数字类型
           var current = element.offsetLeft;
           //每次移动的距离
           var step = 10;
           step = current < target ? step : -step;
           //当前移动到位置
           current += step;
           if (Math.abs(current - target) > Math.abs(step)) {
               element.style.left = current + "px";
           } else {
               //清理定时器
               clearInterval(element.timeId);
               //直接到达目标
               element.style.left = target + "px";
           }
       }, 10);
   }
</script>

  </script>
</html>
